<template>
  <div class="echart3" id="mychart3" :style="myChartStyle3"></div>
</template>

<script>
  import * as echarts from "echarts";

  export default {
    data() {
      return {
        myChart: {},
        pieData: [
          {
            value: 463,
            name: "男"
          },
          {
            value: 395,
            name: "女"
          }
        ],
        pieName: [],
        myChartStyle3: {  width: "50%", height: "300px", } //图表样式
      };
    },
    mounted() {
      this.initDate(); //数据初始化
      this.initEcharts();
    },
    methods: {
      initDate() {
        for (let i = 0; i < this.pieData.length; i++) {
          // this.xData[i] = i;
          // this.yData =this.xData[i]*this.xData[i];
          this.pieName[i] = this.pieData[i].name;
        }
      },
      initEcharts() {
        // 饼图
        const option = {
          legend: {
            // 图例
            data: this.pieName,
            top: "80%",
            orient: "horizontal",
            itemGap: 10
          },
          series: [
            {
              type: "pie",
              label: {
                show: true,
                formatter: function (p) { //指示线对应文字,百分比
                  return p.percent.toFixed(0) + "%";//设置百分比保留几位小数
                }, // b代表名称，c代表对应值，d代表百分比
                position: 'inner'
              },
              radius: "50%", //饼图半径
              data: this.pieData,
              
            }
          ]
        };
        console.log(this.seriesData);
        const optionFree = {
          xAxis: {},
          yAxis: {},
          series: [
            {
              data: this.seriesData,
              type: "line",
              smooth: true
            }
          ]
        };
        this.myChart = echarts.init(document.getElementById("mychart3"));
        this.myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      }
    }
  };
</script>
<style scoped>
</style>